<template>
  <ga-modal
    v-model:visible="visible"
    title-align="start"
    :width="600"
    :body-style="{ height: '390px' }"
    @close="handleCancel()"
  >
    <template #title>{{ curId ? "编辑" : "创建" }}</template>
    <ga-spin style="width: 100%" :loading="loading">
      <ga-form-item label="插件类型" label-col-flex="90px">
        <!-- <ga-select size="small" v-model="pluginType">
          <ga-option v-for="item in pluginsList" :key="item.value" :value="item.value">
            {{ item.label }}
          </ga-option>
        </ga-select> -->
        <ga-radio-group v-model="pluginType" size="small">
          <ga-radio v-for="item in pluginsList" :key="item.value" :value="item.value">
            {{ item.label }}
          </ga-radio>
        </ga-radio-group>
      </ga-form-item>
      <createBk ref="formBkRef" v-model="formbkData" v-if="pluginType === 'bk'" />
      <createQingteng
        ref="formQingtengRef"
        v-model="formqtData"
        :jobList="jobList"
        v-if="pluginType === 'qingteng'"
      />
      <createBL ref="formBlRef" v-model="formblData" v-if="pluginType === 'bastion'" />
    </ga-spin>
    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <ga-button type="primary" @click="handleOk">确定</ga-button>
    </template>
  </ga-modal>
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import {
  createPlugin,
  editPlugin,
  getPluginDetail,
  getBkJobList,
} from "@/api/pluginMgmt";
import { Message } from "@garco-design/web-vue";
import useLoading from "@/hooks/loading";
import createBk from "./components/createBk.vue";
import createQingteng from "./components/createQingteng.vue";
import createBL from "./components/createBL.vue";
const { loading, setLoading } = useLoading(false);
const jobList = ref(null);
const visible = ref(false);
const curId = ref("");
const formBkRef = ref(null);
const formQingtengRef = ref(null);
const formBlRef = ref(null);
const pluginType = ref("bk");
const pluginsList = [
  { value: "bk", label: "蓝鲸" },
  { value: "qingteng", label: "青藤" },
  { value: "bastion", label: "堡垒机" },
];
// 蓝鲸
const formbkData = reactive({
  url: "",
  username: "",
  appCode: "",
  appSecret: "",
  waitTime: "",
});
// 青藤
const formqtData = reactive({
  windows: "",
  linux: "",
});
// 堡垒机
const formblData = reactive({
  url: "",
  token: "",
  tokenName: "",
});
// 编辑方法
const open = async (record) => {
  visible.value = true;
  if (!record?.id) return;
  setLoading(true);
  pluginType.value = record.component;
  curId.value = record.id;
  try {
    if (record.component === "qingteng") {
      const res = await getBkJobList();
      jobList.value = res?.data;
    }
    const { data } = await getPluginDetail(record.component);
    const config = data?.config || {};
    const assignFormData = (formData) => {
      Object.keys(formData)?.forEach((key) => {
        formData[key] = config[key];
      });
    };
    if (record.component === "bk") {
      assignFormData(formbkData);
    } else if (record.component === "qingteng") {
      assignFormData(formqtData);
    } else {
      assignFormData(formblData);
    }
  } finally {
    setLoading(false);
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const bkValid = await formBkRef.value?.formRef.validate();
  const qtValid = await formQingtengRef.value?.formRef.validate();
  const blValid = await formBlRef.value?.formRef.validate();
  const obj =
    pluginType.value === "bk"
      ? formbkData
      : pluginType.value === "qingteng"
      ? formqtData
      : formblData;
  if (!bkValid && !qtValid && !blValid) {
    try {
      const { code } = !curId.value
        ? await createPlugin(pluginType.value, obj)
        : await editPlugin(pluginType.value, obj);
      if (code === 20000) Message.success("操作成功");
      emits("fetchData");
    } finally {
      visible.value = false;
    }
  }
};

const handleCancel = () => {
  // curId.value = "";
  pluginType.value = "bk";
  formBkRef.value?.formRef.resetFields();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.garco-modal-body) {
  padding: 0 !important;
}
</style>
